<template>
	<view>
		<view class="list"></view>
		<view class="boxes" @click="go_detail(item.id)" v-for="(item, index) in list" :key="index">
			<view class="uni-box">
				<image src="/static/img/s4.png" mode=""></image>
				<view class="box3">{{ item.statusName }}</view>
			</view>
			<view class="uni-box">
				<view class="uni-flex">
					<view class="box1">工单编号</view>
					<view class="box2">{{ item.orderNum }}</view>
				</view>
			</view>
			<view class="uni-flex">
				<view class="box1">处理时限</view>
				<view class="box2">{{ item.expireTime }}</view>
			</view>
		</view>
		<uni-load-more v-if="show" :status="loadingType" :contentText="contentText"></uni-load-more>

		<view v-show="topShow" class="uni-top">
			<image class="uni-top-img" src="/static/imgs/a44.png" mode=""></image>
			<view class="uni-top-title">暂无工单!</view>
		</view>
	</view>
</template>

<script>
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
var timer = null;
export default {
	components: {
		uniLoadMore
	},
	data() {
		return {
			list: [],
			show: false,
			loadingType: 'more',
			// loadingType: "noMore",
			// loadingType: "loading",
			contentText: {
				contentdown: '上拉显示更多',
				contentrefresh: '正在加载...',
				contentnomore: '没有更多数据了'
			},
			score: 0,
			page: 1,
			topShow:false,
		};
	},
	onReachBottom: function() {
		//触底的时候请求数据，即为上拉加载更多
		//为了更加清楚的看到效果，添加了定时器
		var that = this;
		if (timer != null) {
			clearTimeout(timer);
		}
		timer = setTimeout(function() {
			that.my_detail();
		}, 500);
	},
	onLoad() {},
	onShow() {
		this.page = 1;
		this.list = [];
		this.my_detail();
	},
	methods: {
		go_detail(id) {
			uni.navigateTo({
				url: '/pages/123List/manage/workDetail?id=' + id
			});
		},

		my_detail() {
			//工单管理列表
			uni.showLoading({
				mask: false
			});
			uni.request({
				url: '/app/wechatApi/wechatOneFiveOrder/getMyWaitReceiptList',
				method: 'GET',
				data: {
					openid: uni.getStorageSync('openid'),
					pageIndex: this.page,
					pageSize: 20
				},
				header: {
					'Content-type': 'application/x-www-form-urlencoded'
				},
				success: res => {
					// console.log(res)
					uni.hideLoading();
					if (res.data.code == 200) {
						// console.log(res)
						var listDate = res.data.data.records;
						//concat 连接字符串
						this.list = this.list.concat(listDate);
						if(this.list.length==0){
							this.show = false;
							this.topShow = true
							return
						}
						this.loadingType = 'more';
						this.score = listDate.score;
						console.log(listDate.length);
						this.page += 1;
						uni.hideNavigationBarLoading(); //关闭加载动画
						if (listDate.length == 0) {
							//没有数据
							this.show = true;
							this.loadingType = 'noMore';
							uni.hideNavigationBarLoading(); //关闭加载动画
							return;
						}
					} else {
						uni.showToast({
							title: '网络错误...',
							icon: 'none'
						});
					}
					uni.hideNavigationBarLoading(); //关闭加载动画
				},
				error: e => {
					uni.hideLoading();
					console.log(e);
				}
			});
		}
	}
};
</script>

<style>
page {
	background: #ffffff;
}
.list {
	height: 1px;
}
image {
	width: 40upx;
	height: 60upx;
}
.boxes {
	background: #ffffff;
	padding: 35upx 25upx;
	border: 1px solid #E0E0E0;
	margin: 25upx;
	border-radius: 10upx;
}
.uni-box {
	display: flex;
	justify-content: space-between;
	align-content: center;
	margin: 10upx 0;
}
.box1 {
	white-space: nowrap;
	color: #333333;
	width: 150upx;
}
.box2 {
	color: #bdbdbd;
	width: 430upx;
	line-height: 150%;
}
.box3 {
	color: #e68787;
}

/* 空数据展示 */
.uni-top {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: 777;
	text-align: center;
}
.uni-top-img {
	width: 168upx;
	height: 168upx;
	margin-bottom: 25upx;
}

.uni-top-title {
	font-size: 24upx;
	white-space: nowrap;
	color: #999999;
}
</style>
